<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="基本信息">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <el-form-item label="订单编号：" class="width-50" prop="paymentNo">
                        <!-- <el-input class="flex-input" v-model="form.paymentNo"></el-input> -->
                        <span class="textStyle">{{form.paymentNo}}</span>
                    </el-form-item>
                    <el-form-item label="收款单位：" class="width-50" prop="orgName">
                        <!-- <el-input class="flex-input" v-model="form.orgName"></el-input> -->
                        <span class="textStyle">{{form.orgName}}</span>
                    </el-form-item>
                    <el-form-item label="项目：" class="width-50" prop="villageName">
                        <!-- <el-input class="flex-input" v-model="form.villageName"></el-input> -->
                        <span class="textStyle">{{form.villageName}}</span>
                    </el-form-item>
                    <el-form-item label="分期/区：" class="width-50" prop="stagesName">
                        <!-- <el-input class="flex-input" v-model="form.stagesName"></el-input> -->
                        <span class="textStyle">{{form.stagesName}}期</span>
                    </el-form-item>
                    <el-form-item label="楼栋与单元：" class="width-50" prop="buildingUnit">
                        <!-- <el-input class="flex-input" v-model="form.buildingUnit"></el-input> -->
                        <!-- <span class="textStyle">{{form.buildingUnit}}</span> -->
                        <span class="textStyle">{{form.building}}栋{{form.unit}}单元</span>
                    </el-form-item>
                    <el-form-item label="房屋：" class="width-50" prop="roomCode">
                        <!-- <el-input class="flex-input" v-model="form.roomCode"></el-input> -->
                        <span class="textStyle">{{form.roomCode}}</span>
                    </el-form-item>
                    <el-form-item label="缴费人：" class="width-50" prop="ownerName">
                        <!-- <el-input class="flex-input" v-model="form.ownerName"></el-input> -->
                        <span class="textStyle">{{form.ownerName}}</span>
                    </el-form-item>
                    <el-form-item label="缴费金额：" class="width-50" prop="paymentAmount">
                        <!-- <el-input class="flex-input" v-model="form.paymentAmount">
                            <template slot="append">元</template>
                        </el-input> -->
                        <span class="textStyle">{{form.paymentAmount}}元</span>
                    </el-form-item>
                    <el-form-item label="缴费类型：" class="width-50" prop="payCause">
                        <!-- <EdSelect v-model="form.payCause" :selectParams="selectParamsPayCause"></EdSelect> -->
                        <span class="textStyle">{{returnName(form.payCause, selectParamsPayCause.options)}}</span>
                    </el-form-item>
                    <el-form-item label="收费状态：" class="width-50" prop="paymentStatus">
                        <!-- <EdSelect v-model="form.paymentStatus" :selectParams="selectParamsSendStatus"></EdSelect> -->
                        <span class="textStyle">{{returnName(form.paymentStatus, selectParamsSendStatus.options)}}</span>
                    </el-form-item>
                    <el-form-item label="付款时间：" class="width-50" prop="payTime">
                        <!-- <EdDateTimePicker v-model="form.payTime" ref="edDateTimePickerRef" :pickerParams="pickerParams" @emit-echo-time-date="emitEchoTimeDate($event, 'payTime')"></EdDateTimePicker> -->
                        <span class="textStyle">{{form.payTime}}</span>
                    </el-form-item>
                    <el-form-item label="备注信息：" class="width-50" prop="annotation">
                        <!-- <el-input class="flex-input" v-model="form.annotation"></el-input> -->
                        <span class="textStyle">{{form.annotation}}</span>
                    </el-form-item>
                </div>
                <!-- <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" :loading="disabled">确定</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                </el-form-item> -->
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
    import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import { detailPayLog } from "./api";
    import { returnName } from "src/utils/common.js";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimePicker, WisdomUploadSingle, EdSelect},
        data(){
            return{
                form:{
                    paymentNo: '',
                    orgName: '',
                    villageName: '',
                    stagesName: '',
                    // buildingUnit: '',
                    building: '',
                    unit: '',
                    roomCode: '',
                    ownerName: '',
                    paymentAmount: '',
                    payCause: '',
                    paymentStatus: '',
                    payTime: '',
                    annotation: '',
                },
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                disabled:false,
                selectParamsCompany:{
                    options: [{
                        value: '1',
                        label: '单元1'
                    }, {
                        value: '2',
                        label: '单元2'
                    }],
                },
                selectParamsItem:{
                    options: [{
                        value: '1',
                        label: '项目1'
                    }, {
                        value: '2',
                        label: '项目2'
                    }],
                },
                selectParamsAddress:{
                    options: [{
                        value: '1',
                        label: '分期1'
                    }, {
                        value: '2',
                        label: '分期2'
                    }],
                },
                selectParamsHouse:{
                    options: [{
                        value: '1',
                        label: '楼栋1'
                    }, {
                        value: '2',
                        label: '楼栋2'
                    }],
                },
                selectParamsPayCause:{
                    options: [{
                        value: '0',
                        label: '物业费'
                    }, {
                        value: '1',
                        label: '车位费'
                    }, {
                        value: '2',
                        label: '其他'
                    }],
                    placeholder:"请选择缴费类型"
                },
                selectParamsSendStatus:{
                    options: [{
                        value: '2',
                        label: '成功'
                    }, 
                    // {
                    //     value: '2',
                    //     label: '失败'
                    // }
                    ],
                },
            };
        },
        activated(){
            if(this.$route.query.id){
                // 编辑 
                this.detailCompany();
            }else {
              
            }
            // this.getTransferData();
        },
        methods:{
            detailCompany(){
                detailPayLog({id:this.$route.query.id}).then(response => {
                    if(response.code == 20000) {
                        this.form = {
                            paymentNo:response.data.paymentNo,
                            // orgName:response.data.orgName,
                            orgName:this.$store.getters.orgName,
                            villageName:response.data.villageName,
                            stagesName:response.data.stagesName,
                            // buildingUnit:response.data.buildingUnit,
                            building:response.data.building,
                            unit:response.data.unit,
                            roomCode:response.data.roomCode,
                            ownerName:response.data.ownerName,
                            paymentAmount:response.data.paymentAmount,
                            payCause:response.data.payCause.toString(),
                            paymentStatus: response.data.paymentStatus.toString(),
                            payTime: response.data.payTime,
                            annotation: response.data.annotation,
                        };
                    }
                })
            },
            emitEchoTimeDate($event, name){
                // $event 子组件$emit传的参数 
                console.log('date--->', $event, name)
               this.form[name]=$event;
            },
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        // this.disabled = true;
                        let query = this.form.copy();
                        // console.log('query-->', query)
                        
                        // payLogAdd(query).then(response => {
                        //     if(response.code == 20000) {
                        //         this.disabled = false;
                        //         this.$message.success({
                        //             message: '保存成功',
                        //             center: true,
                        //             duration: 2000,
                        //         });
                        //         this.form.id = response.data;
                        //         if(this.$route.query.type !=0){
                        //             window.setTimeout(() => {
                        //                 this.$utilsSet.goBack(this.$router);
                        //             }, 600)
                        //         }
                        //     }else {
                        //         this.disabled = false
                        //     }
                        // }).catch(()=>{
                        //     this.disabled = false
                        // })
                    }
                })
            },
            returnName(val, options){
                return returnName(val, options)
            },
        }
    })
</script>

<style scoped lang="scss">
    :deep .el-form-item{
        .el-form-item__content{
            .el-input{
                //  input{
                    // width: 400px !important;
                    width: 60% !important;
                // }
            }
            .el-select{
                width: 60% !important;
                .el-input{
                    width: 100% !important;
                }
            }
            .el-transfer{
                .el-transfer__buttons{
                    width: 20% !important;
                    text-align: center !important;
                }
                .el-transfer-panel{
                    width: 28% !important;
                }
            }
        }
    }
    .img_center{
        display: flex;
        align-items: center;
    }
    .form_btns{
        display: flex;
        justify-content: flex-end;
        margin-right: 10px;
    }
    .textStyle{
        color: #606266;
    }
</style>